<!--
 * @Author: your name
 * @Date: 2020-10-19 16:37:30
 * @LastEditTime: 2020-10-22 20:41:39
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \house_keeper\src\components\Form\Select.vue
-->

<template>
  <div class="house-keeper-select-tree">
    <el-popover
      placement="bottom"
      style="width: 100%"
      trigger="click"
      :append-to-body="false"
      popper-class="house-keeper-tree-popper"
    >
      <el-select
        ref="selectRef"
        slot="reference"
        :value="value"
        style="width: 100%"
        popper-class="house-keeper-select-tree-popper"
        size="small"
        :multiple="multiple"
        :multiple-limit="multipleLimit"
        :disabled="disabled"
        :placeholder="placeholder"
        :clearable="clearable"
        :default-first-option="true"
        :automatic-dropdown="true"
        :popper-append-to-body="false"
      >
        <el-option
          v-for="item in elOps"
          :label="item[bindLabel]"
          :value="item[bindValue]"
          :key="item[bindValue]"
        ></el-option>
      </el-select>
      <div class="tree-body selectTree">
        <NiceScroll ref="niceScrollTree" wrapperClass="selectTree" :config="config">
          <div class="scroll-container">
            <el-tree :data="data" @node-collapse="resizeScrollBar" @node-expand="resizeScrollBar">
              <span
                class="custom-tree-node"
                @click="onClickNode($event, data)"
                slot-scope="{ data }"
              >
                <span>{{ data[bindLabel] }}</span>
              </span>
            </el-tree>
          </div>
        </NiceScroll>
      </div>
    </el-popover>
  </div>
</template>

<script>
import NiceScroll from "../form/NiceScroll/index";
export default {
  data() {
    return {};
  },

  name: "HouseKeeperSelectTree",
  props: {
    data: {
      type: Array,
      default: () => []
    },
    multiple: {
      // 是否多选
      type: Boolean,
      default: false
    },
    multipleLimit: {
      type: Number,
      default: 0
    },
    value: [String, Number],
    disabled: {
      // 是否禁用
      type: Boolean,
      default: false
    },
    placeholder: String,
    clearable: {
      type: Boolean,
      default: false
    },
    unit: {
      type: String
    },
    bindLabel: {
      type: String,
      default: "label"
    },
    bindValue: {
      type: String,
      default: "value"
    }
  },
  data() {
    return {
      config: {
        cursorcolor: "rgba(0,0,0,0.4)", // 改变滚动条颜色，使用16进制颜色值
        cursorwidth: "6px", // 滚动条的宽度，单位：便素
        cursorborderradius: "4px", // 滚动条圆角（像素）
        scrollspeed: 60, // 滚动速度
        mousescrollstep: 40 // 鼠标滚轮的滚动速度 (像素)
      }
    };
  },
  computed: {
    elOps() {
      let stack = [...this.data];
      let data = [];
      while (stack.length != 0) {
        let shift = stack.shift();
        data.push(shift);
        let children = shift.children;
        if (children) {
          for (let i = 0; i < children.length; i++) {
            stack.push(children[i]);
          }
        }
      }
      return data;
    }
  },
  components: { NiceScroll },
  methods: {
    resizeScrollBar() {
      this.$refs.niceScrollTree.resize();
    },
    onClickNode(e, data) {
      this.$emit("input", data[this.bindValue]);
      document.body.click();
    }
  }
};
</script>

<style lang="scss" scope>
.house-keeper-select-tree {
  position: relative;
  width: 100%;
  max-height: 250px;
}
.house-keeper-tree-popper {
  width: 100%;
  transform: translateX(-5px);
  position: relative;
  height: 250px;
}
.tree-body {
  height: 100%;
  position: relative;
  .custom-tree-node {
    width: 100%;
    height: 26px;
    line-height: 26px;
    font-size: 12px;
    color: #333;
  }
}
.scroll-container {
  position: absolute;
  height: 100%;
  width: 100%;
}
.el-tree {
  height: 100%;
  width: 100%;
  // top: 32px;
  overflow:auto !important;
}
</style>